<template>
  <div>
      <div class='layout'><div ><Tag class="size" color="red"><h2>试卷管理</h2></Tag></div>
    <div><Tag checkable color="error">未通过试卷(小于60分)</Tag></div></div>
    <div class='pos'><div v-for="(item, index) in  unpassExamPages" :key="index">
      <Card style="width:150px;height:150px">
        <div style="text-align:center">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#iconkaoshiweitongguo"></use>
            </svg></div>
            <h1>{{item.examPageTitle}}</h1>
            <Button size='small'type="primary" @click="Inter(index,unpassExamPages)" >成绩单</Button> 
            <Button size='small'type="primary" @click="delect(index,unpassExamPages)" >删除</Button> 
    </Card></div></div> <Divider />
    <div><Tag checkable color="error">及格试卷(60分-80分)</Tag></div>
    <div class='pos'><div v-for="(item, index) in justPassExamPages" :key="index">
      <Card style="width:150px;height:150px">
        <div style="text-align:center">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#iconwode-lianxikaoshi"></use>
            </svg></div>
                <h1>{{item.examPageTitle}}</h1>
                <Button size='small'type="primary" @click="Inter(index,justPassExamPages)" >成绩单</Button> 
                <Button size='small'type="primary" @click="delect(index,justPassExamPages)" >删除</Button> 
    </Card></div></div><Divider />
     <div><Tag checkable color="error">优秀试卷(80分以上)</Tag></div>
      <div class='pos'><div v-for="(item, index) in  excellentExamPages" :key="index">
      <Card style="width:150px;height:150px">
        <div style="text-align:center">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#iconkaoshi-tongguokaoshi"></use>
            </svg></div> 
                  <h1>{{item.examPageTitle}}</h1>         
                  <Button size='small'type="primary" @click="Inter(index,excellentExamPages)" >成绩单</Button> 
                  <Button size='small'type="primary" @click="delect(index,excellentExamPages)" >删除</Button> 
    </Card></div></div>
    </div>
</template>
<script>
export default {
    props:['studentName'],
    data () {
      return {
     studentAnsweredPage:[],
     studentName:this.studentName,
     unpassExamPages:[],
     justPassExamPages:[],
     excellentExamPages:[]
      }
},
    methods: {
      Inter(index,a){
        var yourscore=a[index]
          this.$router.push({
          path:'/Transcript',
          query:{Msg:yourscore,studentName:this.studentName}
        })
      },
       delect(i,b){
            var id=b[i]._id
            var idColl=[]
            idColl.push(id)
             b.splice(i,1)
       this.$axios({
        method:"post",
        url:"http://"+this.urlpath+"/RemoveStudentAnswerPage",
        data:idColl
       }).then(
        res=>{
       
        }
       )
          this.$Message.error('删除成功')
       }
      
   
    
    
    
    },
    mounted() {
      var a={whoAnswered:this.studentName}
      this.$axios({
        method:"post",
        url:"http://"+this.urlpath+"/FindOneStudentAnsweredPage",
        data:a
      }).then(
        res=>{
          this.studentAnsweredPage=res.data 
          res.data.map(item=>{
            if(item.scare<60){
              this.unpassExamPages.push(item)
            }
            else if(item.scare>=60&&item.scare<80){
              this.justPassExamPages.push(item)
            }else{
                this.excellentExamPages.push(item)
            }
            }) 
            console.log(this.unpassExamPages)
              console.log( this.justPassExamPages)
                console.log( this.excellentExamPages)
        }
      )
    },

}
</script>
<style scoped> 
.layout{
  display: flex;
  flex-direction: column;
}
.icon {
  width: 4em;
  height: 4em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.pos{
    margin:20px 10px;
    padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-evenly;
}
.pos h4{
  width: 100px;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis
}
</style>